"use strict"
function CMenu(rootId,json,config) {
    function extend(t,o) {
        for(var n in o){
            t[n]=o[n] ;
        }
    }
    function createEL(name) {
        return document.createElement(name);
    }
    function type(v) {
        return Object.prototype.toString.apply(v).replace("[object ","").replace("]","");
    }
    var root = document.getElementById(rootId);
    root.style.userSelect = "none";
    root.style.webkitUserSelect = "none";
    root.style.mozUserSelect = "none";
    root.style.msUserSelect = "none";
    root.style.cursor = "pointer";
    //默认配置
    var cfg = {
        open:true,// true|false|number
        activeIndex:[0,0], //false|[number,number]|菜单名
        changeTime: 240, //菜单展开和收缩动画时间  毫秒为单位
        timePerFrame: 10,//每帧多少毫秒
        mode:true,   //true|false   true打开跳转链接 false执行回调
        firstRunCallback:true, //第一次加载之后执行回调
        callback:function () {},
    };
    if(config){
        extend(cfg,config);
    }

    var boxsize = json.length;
    var box = [];
    for(var i=0;i<boxsize;i++){
        var els = {};
        els.open = true;
        els.parent = createEL("div");
        els.parent.index = i;
        els.parent.className = "parent";
        els.parent.spans = [];
        els.parent.spans.push(createEL("span"),createEL("span"),createEL("span"));
        els.parent.spans[0].className = json[i].fonts[0];
        els.parent.spans[1].innerText = json[i].name;
        els.parent.spans[2].className = json[i].fonts[1];
        for(var m=0;m<els.parent.spans.length;m++){
            els.parent.appendChild(els.parent.spans[m]);
        }

        els.box = createEL("div");
        els.box.className = "box";
        els.box.childs = {};
        for(var j=0;j<json[i].children.length;j++){
            els.box.childs[j] = createEL("div");
            els.box.childs[j].index = j;
            els.box.childs[j].className = "child";
            els.box.childs[j].spans = [];
            els.box.childs[j].spans.push(createEL("span"),createEL("span"));
            els.box.childs[j].spans[0].className = json[i].children[j].font;
            els.box.childs[j].spans[1].innerText = json[i].children[j].name;
            els.box.childs[j].url = json[i].children[j].url;
            els.box.childs[j].appendChild(els.box.childs[j].spans[0]);
            els.box.childs[j].appendChild(els.box.childs[j].spans[1]);
            els.box.appendChild(els.box.childs[j]);
        }

        root.appendChild(els.parent);
        root.appendChild(els.box);
        box.push(els);
    }
    var itemH = box[0].box.clientHeight/Object.keys(box[0].box.childs).length;
    if(cfg.open!==true){
        for(var i=0;i<boxsize;i++){
            box[i].open=false;
        }
        if(cfg.open!==false){
            box[cfg.open].open=true;
        }
    }
    for(var i=0;i<boxsize;i++){
        if(box[i].open){
            box[i].parent.spans[2].className = json[i].fonts[2];
        }
        else {
            box[i].box.style.height="0px";
        }
    }
    var currentActiveIndex;
    if(cfg.activeIndex!=false){
        if(type(cfg.activeIndex)=="String"){
            for(var i=0;i<json.length;i++){
                var flag = false;
                for(var j=0;j<json[i].children.length;j++){
                    if(cfg.activeIndex==json[i].children[j].name){
                        currentActiveIndex=[i,j];
                        flag = true;
                        break;
                    }
                }
                if(flag){
                    break;
                }
            }
        }
        else{
            currentActiveIndex = cfg.activeIndex;
        }
    }
    else{
        currentActiveIndex = cfg.activeIndex;
    }

    function removeActive() {
        box[currentActiveIndex[0]].parent.classList.remove("parent-active");
        box[currentActiveIndex[0]].box.childs[currentActiveIndex[1]].classList.remove("child-active");
    }
    function setActive() {
        if(currentActiveIndex!=false){
            box[currentActiveIndex[0]].parent.classList.add("parent-active");
            box[currentActiveIndex[0]].box.childs[currentActiveIndex[1]].classList.add("child-active");
        }
    }
    setActive();
    if(cfg.firstRunCallback){
        cfg.callback(box[currentActiveIndex[0]].box.childs[currentActiveIndex[1]].spans[1].innerText,currentActiveIndex);
    }

    var frameCount = cfg.changeTime/cfg.timePerFrame;
    function openBox(index) {
        var current = 0;
        var end = itemH * Object.keys(box[index].box.childs).length;
        var step = Math.ceil(end/frameCount);
        function change() {
            if(current < end){
                current+=step;
                current = current>end?end:current;
                box[index].box.style.height = current + "px";
                setTimeout(change,cfg.timePerFrame);
            }
        }
        setTimeout(change,cfg.timePerFrame);
    }
    function closeBox(index) {
        var current = itemH * Object.keys(box[index].box.childs).length;
        var end = 0;
        var step = Math.ceil(current /frameCount);
        function change() {
            if(current > end){
                current-=step;
                current = current<end?end:current;
                box[index].box.style.height = current + "px";
                setTimeout(change,cfg.timePerFrame);
            }
        }
        setTimeout(change,cfg.timePerFrame);
    }

    for(var i=0;i<boxsize;i++){
        box[i].parent.addEventListener("click",function () {
            if(box[this.index].open){
                box[this.index].open = false;
                box[this.index].parent.spans[2].className=json[this.index].fonts[1];
                closeBox(this.index);
            }
            else {
                box[this.index].open = true;
                box[this.index].parent.spans[2].className=json[this.index].fonts[2];
                openBox(this.index);
            }
        });
        for(var j=0;j<Object.keys(box[i].box.childs).length;j++){
            (function (i,j) {
                box[i].box.childs[j].addEventListener("click",function () {
                    if(cfg.mode){
                        location.href = this.url;
                    }
                    else{
                        removeActive();
                        currentActiveIndex = [i,j];
                        setActive();
                        cfg.callback(this.spans[1].innerText,currentActiveIndex);
                    }
                });
            }(i,j));
        }
    }
}